<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="http://cdn.highcharts.com.cn/highcharts/6.1.0/highcharts.js"></script>
  <script src="http://cdn.highcharts.com.cn/highcharts/6.1.0/highcharts-more.js"></script>
  <script src="http://cdn.highcharts.com.cn/highcharts/6.1.0/modules/exporting.js"></script>
</head>
<body>
  <div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
  <script>
    Highcharts.chart('container', {
    chart: {
      type: 'boxplot'
    },
    title: {
      text: 'Highcharts box plot styling'
    },
    legend: {
      enabled: false
    },
    xAxis: {
      categories: ['1', '2', '3', '4', '5'],
      title: {
        text: 'Experiment No.'
      }
    },
    yAxis: {
      title: {
        text: 'Observations'
      }
    },
    plotOptions: {
      boxplot: {
        lineWidth: 0,
        // medianColor: '#0C5DA5',
        medianWidth: 0,
        stemColor: '#333',
        stemDashStyle: 'dot',
        stemWidth: 1,
        whiskerColor: '#333',
        whiskerLength: 4,
        whiskerWidth: 2
      }
    },
    series: [{
      name: 'errorbar',
      data: [
        [0, 0, 150, 0, 200],
        // [733, 853, 939, 980, 1080],
        // [714, 762, 817, 870, 918],
        // [724, 802, 806, 871, 950],
        // [834, 836, 864, 882, 910]
      ]
    }]
  });
  </script>
</body>
</html>